<div class="loginPage">
  <div class="loginForm">
    <h2>欢迎使用 Microsoft To-Do</h2>
    <div class="btns">
      <button (click)="handleRegister()">
        注册
      </button>
      <button (click)="handleLogin()">
        登录
      </button>
    </div>
  </div>
</div>

<nz-modal [nzVisible]="isModelVisible" [nzContent]="modalContent" [nzTitle]="isLoginForm ? '账号登录'  : '注册账号'" [nzFooter]="null"
  [nzStyle]="{'top': '25%'}" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalContent>

    <!-- login form -->
    <form *ngIf="isLoginForm" nz-form [formGroup]="loginForm" (ngSubmit)="onSubmit(isLoginForm)">
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="getloginFormControl('username')">
          <nz-input formControlName="username" [nzSize]="'large'" [nzPlaceHolder]="'用户名'">
            <ng-template #prefix>
              <i class="anticon anticon-user"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="getLoginFormControlInvalid('username')">
            {{getUsernameErrorMessageForLogin()}}
          </div>
        </div>
      </div>

      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="getloginFormControl('password')">
          <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-lock"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="getLoginFormControlInvalid('password')">
            {{getPasswordErrorMessageForLogin()}}
          </div>
        </div>
      </div>

      <button nz-button [nzType]="'primary'" [nzSize]="'large'" [ngStyle]="{'float':'right'}">
        确定
      </button>
    </form>

    <!-- register form -->
    <form *ngIf="!isLoginForm" nz-form [formGroup]="registerForm" (ngSubmit)="onSubmit(isLoginForm)">
      <div nz-form-item>
        <div nz-form-control nzHasFeedback [nzValidateStatus]="getRegisterFormControl('username')">
          <nz-input formControlName="username" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-user"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="getRegisterFormControlInvalid('username')">
            {{getUsernameErrorMessageForRegister()}}
          </div>
        </div>
      </div>

      <div nz-form-item>
        <div nz-form-control nzHasFeedback [nzValidateStatus]="getRegisterFormControl('password')">
          <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzId]="'password'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-lock"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="getRegisterFormControlInvalid('password')">
            {{getPasswordErrorMessageForRegister()}}
          </div>
        </div>
      </div>

      <div nz-form-item>
        <div nz-form-control nzHasFeedback [nzValidateStatus]="getRegisterFormControl('email')">
          <nz-input formControlName="email" [nzPlaceHolder]="'邮箱'" [nzId]="'email'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-mail"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="getRegisterFormControlInvalid('email')">
            {{getEmailErrorMessageForRegister()}}
          </div>
        </div>
      </div>

      <button nz-button [nzType]="'primary'" [nzSize]="'large'" [ngStyle]="{'float':'right'}">
        确定
      </button>
    </form>

  </ng-template>
</nz-modal>
